<template>
  <div class="cart">
    <h2>我的购物车</h2>
    
    <div v-if="cart.length === 0">购物车为空</div>
    
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.name }} - ￥{{ item.price }} × 
        <button @click="removeFromCart(item.id)">-</button>
        {{ item.quantity }}
        <button @click="addToCart(item)">+</button>
      </li>
    </ul>
    
    <h3>总价：￥{{ totalPrice }}</h3>
  </div>
</template>

<script>
export default {
  name: 'Cart',
  computed: {
    cart() {
      return this.$store.state.cart
    },
    totalPrice() {
      return this.$store.getters.totalPrice
    }
  },
  methods: {
    removeFromCart(productId) {
      this.$store.dispatch('removeFromCart', productId)
    },
    addToCart(product) {
      this.$store.dispatch('addToCart', product)
    }
  }
}
</script>